/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    InteractionManager
} from 'react-native';
import GCStyle from '../../Model/Global/GCStyle';
import Analysis from './Group/Analysis';
import LChart from './Group/LChart';
import SelectorClass from './Group/SelectorClass';
import SelectorTool from '../../Model/Component/SelectorTool';
import SelectorDate from '../../Model/Component/SelectorDate';
import {connect} from "react-redux";
import {QueryAnalysis, QueryBusiness} from "../../Action/UserAction";
import Toast from "react-native-toast";
class Statistical extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectName: '今日',
            isOpen: false,
            isAnalysis: false,
            selectSty: 1,
            date_type: '1',
            AnalysisData: [1, 2, 3],
            dataX: ['04-11', '04-12', '04-13', '04-14', '04-15', '04-16', '04-17'],
            dataY: [1450, 1300, 1400, 350, 850, 1150, 650],
        };

    }
    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            dispatch(QueryAnalysis(this.state.date_type, 1, 1));
            dispatch(QueryBusiness(this.state.date_type, 1, this.state.selectSty));
        });
    }
    onSelectAction(index, name) {
        if (0 > index) {
            return;
        }

        this.setState({
            isAnalysis: !(0 == index)
        })
    }

    onSelectDate(index, name) {
        var wanjian = '1';
        if (index === 0) {
            wanjian = '1';
        } else if (index === 1) {
            wanjian = '2';
        } else if (index === 2) {
            wanjian = '3';
        }
        const {dispatch} = this.props;
        dispatch({type: 'Complete', D_QueryAnalysis_InNext: 0});
        dispatch(QueryAnalysis(wanjian, 1, 1));
        dispatch(QueryBusiness(wanjian, 1, this.state.selectSty));
        this.setState({
            selectName: name ? name : this.state.selectName,
            isOpen: false,
            date_type: wanjian,
        });
    }

    onActionRight() {
        this.setState({
            isOpen: true
        }, ()=> {
            this.refs.mySelectDate.show();
        })
    }
    toStatistiSty(idx)
    {
        this.setState({
            selectSty: idx
        });
        const {dispatch} = this.props;
        dispatch(QueryBusiness(this.state.date_type, 0, idx));
    }
    detailsView() {
        const {UserReducer} = this.props;

        var bus_line_count = 0;
        var order_count = 0;
        var order_amount = 0;
        if (UserReducer.D_QueryBusiness != null && UserReducer.D_QueryBusiness != '') {
            if(UserReducer.D_QueryBusiness.bus_line_count!=null&&UserReducer.D_QueryBusiness.bus_line_count!=''){
                bus_line_count = UserReducer.D_QueryBusiness.bus_line_count;
            }
            if(UserReducer.D_QueryBusiness.order_count!=null&&UserReducer.D_QueryBusiness.order_count!=''){
                order_count = UserReducer.D_QueryBusiness.order_count;
            }
            if(UserReducer.D_QueryBusiness.order_amount!=null&&UserReducer.D_QueryBusiness.order_amount!=''){
                order_amount = UserReducer.D_QueryBusiness.order_amount;
            }
        }
        return (
            <View style={{
                height: 60,
                marginLeft: 10,
                marginRight: 10,
                justifyContent: 'space-between',
                flexDirection: 'row'
            }}>
                <TouchableOpacity style={{flex:1}}
                                  activeOpacity={0.5}
                                  onPress={() => this.toStatistiSty(1)}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={[styles.priceTxt, {marginBottom: 12, fontSize: 15}]}>￥</Text>
                        <Text style={[styles.priceTxt, {marginBottom: 12}]}>{order_amount}</Text>
                    </View>
                    <Text style={[styles.prompTitleTxt, {marginLeft: 5}]}>营收额</Text>
                    {this.state.selectSty === 1 ?
                        <Image resizeMode='stretch' source={require('../../Resource/Imgs/app_sign_selected.png')}
                               style={{
                                   height: 2,
                                   width: 38,
                                   position: 'absolute',
                                   marginTop: 58,
                                   alignSelf: 'flex-start',
                                   marginLeft: 5
                               }}/>
                        : null
                    }
                </TouchableOpacity>
                <TouchableOpacity style={{flex:1}}
                                  activeOpacity={0.5}
                                  onPress={() => this.toStatistiSty(2)} >
                    <Text style={[styles.priceTxt, {marginBottom: 12, textAlign: 'center'}]}>{order_count}</Text>
                    <Text style={[styles.prompTitleTxt,{textAlign:'center'}]}>订单量</Text>
                    {this.state.selectSty === 2 ?
                        <Image resizeMode='stretch' source={require('../../Resource/Imgs/app_sign_selected.png')}
                               style={{
                                   height: 2,
                                   width: 38,
                                   position: 'absolute',
                                   marginTop: 58,
                                   alignSelf: 'center'
                               }}/>
                        : null}
                </TouchableOpacity>
                <TouchableOpacity style={{flex:1}}
                                  activeOpacity={0.5}
                                  onPress={() => this.toStatistiSty(3)}>
                    <Text style={[styles.priceTxt, {marginBottom: 12, textAlign: 'right'}]}>{bus_line_count}</Text>
                    <Text style={[styles.prompTitleTxt,{textAlign:'right'}]}>车次数量</Text>
                    {this.state.selectSty === 3 ?
                        <Image resizeMode='stretch' source={require('../../Resource/Imgs/app_sign_selected.png')}
                               style={{
                                   height: 2,
                                   width: 38,
                                   position: 'absolute',
                                   marginTop: 58,
                                   alignSelf: 'flex-end'
                               }}/>
                        : null}
                </TouchableOpacity>
            </View>
        )
    }

    loadMoreData() {
        const {UserReducer, dispatch} = this.props;
        let inNext = UserReducer.D_QueryAnalysis_InNext;
        let page = UserReducer.D_QueryAnalysis_Page;
        if (inNext !== 0) {
            InteractionManager.runAfterInteractions(() => {
                dispatch(QueryAnalysis(this.state.date_type, 1, Number(page) + 1));
            });
        } else {
            if (Number(page) !== 1) {
                Toast.show('木有更多数据');
            }
        }
    }

    refreshData() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            dispatch(QueryAnalysis(this.state.date_type, 1, 1));
        });
    }

    refreshing() {
        const {UserReducer} = this.props;
        return UserReducer.D_QueryAnalysis_IsRefreshing;
    }

    render() {
        const {UserReducer} = this.props;
        console.log('D_QueryBusiness', UserReducer.D_QueryBusiness)
        var dataX = [];
        if (UserReducer.D_QueryBusiness != null && UserReducer.D_QueryBusiness != '') {
            dataX = UserReducer.D_QueryBusiness.time_zone;
        }
        var dataY = [];
        if (UserReducer.D_QueryBusiness != null && UserReducer.D_QueryBusiness != '') {
            dataY = UserReducer.D_QueryBusiness.list_zone;
        }
        return (
            <View style={styles.container}>
                <View style={GCStyle.Style.navigatorView}/>
                {this.state.isAnalysis ?
                    <Analysis data={UserReducer.D_QueryAnalysis} refreshing={() => this.refreshing()}
                              refreshData={() => this.refreshData() } loadMoreData={() => this.loadMoreData()}/>
                    :
                    <View style={{backgroundColor: 'white', paddingTop: 10,}}>
                        <LChart dataX={dataX}
                                dataY={dataY}/>
                        {this.detailsView()}
                    </View>
                }
                <SelectorTool isShowSele={true} marTop={26}
                              onSelectAction={(index, name) => this.onSelectAction(index, name)} selectRow={0}
                              selectArr={['营业统计', '经营分析']}/>
                <SelectorTool ref="mySelectDate" isShowSele={false} marTop={53}
                              onSelectAction={(index, name) => this.onSelectDate(index, name)} selectRow={0}
                              selectArr={['今日', '昨日', '最近7日']}/>
                <TouchableOpacity onPress={() => this.onActionRight()} style={styles.actionRight}>
                    <Text style={{
                        paddingRight: 4,
                        fontSize: 16,
                        color: 'white',
                        backgroundColor: 'rgba(0,0,0,0)'
                    }}>{this.state.selectName}</Text>
                    <Image resizeMode='contain'
                           source={this.state.isOpen ? require('../../Resource/Imgs/nav_dropdown_aUp.png') : require('../../Resource/Imgs/nav_dropdown_a.png')}
                           style={{width: 8, height: 8}}/>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F4F4F4',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    actionRight: {
        top: 30,
        position: 'absolute',
        right: 10,
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',
    },
    priceTxt: {
        fontSize: 18,
        color: '#989898'
    },
    prompTitleTxt: {
        fontSize: 11,
        color: 'black'
    }
});

export default connect((state) => {
    return {UserReducer} = state;
})(Statistical);